<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="width: 500px;margin: 0 auto;">
    <h3>密码模式模式</h3>
    <hr>
    <h4>登录</h4>
    <span style="color: red">账号密码换取token和刷新token</span><br>
    账号：<input id="username" name="username"><br>
    密码：<input id="password" name="username"><br><br>
    <input type="button" onclick="login()" value="登录获取token">
    <div id="loginResponse" style="margin: 20px">
    </div>
    <hr>
    <h4>刷新令牌</h4>
    <span style="color: red">刷新token，得到新的token</span><br>
    <input id="refreshToken" name="refreshToken" placeholder="输入 refresh_token"><br><br>
    <input value="刷新令牌" onclick="refresh_token()" type="button">
    <div id="refreshTokenResponse" style="margin: 20px">
    </div>
    <hr>
    <h4>注销令牌</h4>
    <span style="color: red">注销token，会将token和刷新token一起注销</span><br>
    <input id="token" name="token" placeholder="输入 token"><br><br>
    <input value="注销令牌" onclick="logout()" type="button">
    <div id="tokenResponse" style="margin: 20px">
    </div>
    <script>
        function login() {
            //构造表单数据
            var formData = new FormData();
            formData.append('username', document.getElementById("username").value);
            formData.append('password', document.getElementById("password").value);
            //创建xhr对象
            var xhr = new XMLHttpRequest();
            //创建一个 post 请求，采用异步
            xhr.open('POST', '/password', true);
            xhr.send(formData);
            //注册相关事件回调处理函数
            xhr.onload = function (e) {
                if (e.currentTarget.status == 200 || e.currentTarget.status == 304) {
                    console.log(e)
                    document.getElementById('loginResponse').innerHTML = e.currentTarget.responseText
                }
            };
        }

        function refresh_token() {
            //构造表单数据
            var formData = new FormData();
            formData.append('refreshToken', document.getElementById("refreshToken").value);
            //创建xhr对象
            var xhr = new XMLHttpRequest();
            //创建一个 post 请求，采用异步
            xhr.open('POST', '/password/refreshToken', true);
            xhr.send(formData);
            //注册相关事件回调处理函数
            xhr.onload = function (e) {
                if (e.currentTarget.status == 200 || e.currentTarget.status == 304) {
                    console.log(e)
                    document.getElementById('refreshTokenResponse').innerHTML = e.currentTarget.responseText
                }
            };
        }

        function logout() {
            var xhr = new XMLHttpRequest();
            xhr.open('GET', '/password/logout?token=' + document.getElementById("token").value, true);
            xhr.send(null)
            //注册相关事件回调处理函数
            xhr.onload = function (e) {
                console.log(e)
                if (e.currentTarget.status == 200 || e.currentTarget.status == 304) {
                    document.getElementById('tokenResponse').innerHTML = e.currentTarget.responseText
                }
            };
        }

    </script>
</body>
</html>